<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card
      class="general-card"
      :header-style="{ paddingBottom: '0' }"
      :body-style="{ padding: '17px 20px 21px 20px' }"
    >
      <template #title>
        {{ $t('qsk.everyDay.commit') }}
      </template>
      <template #extra>
        <a-radio-group
        v-model="type"
        type="button"
        @change="typeChange"
      >
        <a-radio value='0'>
          {{ $t('qsk.everyDay.commit.success') }}
        </a-radio>
        <a-radio value='-1'>
          {{ $t('qsk.everyDay.commit.fails') }}
        </a-radio>
      </a-radio-group>
      </template>
      <a-space direction="vertical" :size="10" fill>
        
        <a-table :data="renderList" :pagination="false" :bordered="false" :sticky-header="100">
          <template #columns>
            <a-table-column title="日期" data-index="t"></a-table-column>
            <!-- <a-table-column title="内容标题" data-index="title">
              <template #cell="{ record }">
                <a-typography-paragraph
                  :ellipsis="{
                    rows: 1,
                  }"
                >
                  {{ record.title }}
                </a-typography-paragraph>
              </template>
            </a-table-column> -->
            <a-table-column title="提交数量" data-index="cnt">
            </a-table-column>
            <a-table-column title="渠道" data-index="channel">
            </a-table-column>
            <a-table-column title="产品" data-index="product">
            </a-table-column>
            <!-- <a-table-column
              title="日涨幅"
              data-index="increases"
              :sortable="{
                sortDirections: ['ascend', 'descend'],
              }"
            >
              <template #cell="{ record }">
                <div class="increases-cell">
                  <span>{{ record.increases }}%</span>
                  <icon-caret-up
                    v-if="record.increases !== 0"
                    style="color: #f53f3f; font-size: 8px"
                  />
                </div>
              </template>
            </a-table-column> -->
          </template>
        </a-table>
      </a-space>
    </a-card>
  </a-spin>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import useLoading from '@/hooks/loading';
import { queryPopularList, PopularRecord } from '@/api/dashboard';

export default defineComponent({
  props:{
      commit:{
        type: Promise<any[]>
      }
  },
  setup(props) {
    
    const type = ref('0');
    const { loading, setLoading } = useLoading();
    const renderList = ref<any[]>();
    const fetchData = async (contentType: string) => {
      try {
        setLoading(true);
        const resp = await props.commit
        let data:any[] =[];
        resp?.map((el)=>{
          if(el.status === parseInt(contentType)){
            data.push(el);
          }
          renderList.value = data.reverse();
        })
        // renderList.value = ;
      } catch (err) {
        // you can report use errorHandler or other
      } finally {
        setLoading(false);
      }
    };
    const typeChange = (contentType: string) => {
      fetchData(contentType);
    };
    fetchData('0');
    return {
      type,
      typeChange,
      loading,
      renderList,
    };
  },
});
</script>

<style scoped lang="less">
.general-card {
  min-height: 388px;
}
:deep(.arco-table-tr) {
  height: 44px;
  .arco-typography {
    margin-bottom: 0;
  }
}
.increases-cell {
  display: flex;
  align-items: center;
  span {
    margin-right: 4px;
  }
}
</style>
